<template>
  <div>
    <ul class="ul1">
      <li class="li1" v-for="(item, index) in list" :key="index">
        <span class="iconfont big" :class="item.icon" :style="'color:'+style()" ></span>
        <p>{{ item.name }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "VantMyfourlist",

  data() {
    return {};
  },

  mounted() {},

  methods: {
    style() {
      let R = Math.floor(Math.random() * 255);
      let G = Math.floor(Math.random() * 255);
      let B = Math.floor(Math.random() * 255);
      return "rgb(" + R + "," + G + "," + B + ")";
    },
  },
  props: {
    list: {
      type: Array,
    },
  },
};
</script>

<style scoped>
.ul1 {
  display: flex;
  /* align-items:center; */
  /* align-content: center; */
}
.ul1 .li1 {
  /* width: 25%; */
  flex: 1;
  text-align: center;
}
.ul1 .li1:active{
  background-color: #eee;
  border-radius: .2667rem;
}
.big {
  /* background-color: chartreuse; */
  font-size: 22px;
}
</style>